<template>
  <a-drawer
    title="拆分房源"
    :width="400"
    :visible="visible"
    :body-style="{
      height: 'calc(100% - 115px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    :maskClosable="true"
  >
    <a-form layout="vertical">
      <a-row>
        <a-col :span="24">
          <a-alert
            show-icon
            message="拆分出来的房间除面积外其他设置均与原房间一致；拆分出来的房间面积值必须小于原房间面积。"
          />
        </a-col>
        <a-col :span="24" style="margin-top: 20px">
          <a-form-item label="房号" v-bind="validateInfos.room_name">
            <a-input
              v-model:value="modelRef.room_name"
              placeholder="请输入房号"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="房间数字编号" v-bind="validateInfos.room_number">
            <a-input-number
              v-model:value="modelRef.room_number"
              placeholder="请输入房间数字编号"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="计租面积" v-bind="validateInfos.rental_area">
            <a-input-number
              v-model:value="modelRef.rental_area"
              placeholder="请输入计租面积"
              style="width: 70%"
              :min="0"
              :max="Number(parentRoom.rental_area)"
            />
            <span class="ml-10">㎡</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="计费面积" v-bind="validateInfos.charging_area">
            <a-input-number
              v-model:value="modelRef.charging_area"
              placeholder="请输入计费面积"
              style="width: 70%"
              :min="0"
              :max="Number(parentRoom.charging_area)"
            />
            <span class="ml-10">㎡</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="建筑面积" v-bind="validateInfos.build_area">
            <a-input-number
              v-model:value="modelRef.build_area"
              placeholder="请输入建筑面积"
              style="width: 70%"
              :min="0"
              :max="Number(parentRoom.build_area)"
            />
            <span class="ml-10">㎡</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="套内面积" v-bind="validateInfos.inside_area">
            <a-input-number
              v-model:value="modelRef.inside_area"
              placeholder="请输入套内面积"
              style="width: 70%"
              :min="0"
              :max="Number(parentRoom.inside_area)"
            />
            <span class="ml-10">㎡</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item v-bind="validateInfos.split_parent_area">
            <template #label>
              <span>是否扣除原房源面积</span>
              <text-tip
                tips="开启后，原房源的对应面积会减去拆分出来新房源的面积"
              />
            </template>
            <a-switch
              v-model:checked="modelRef.split_parent_area"
              :checkedValue="1"
              :unCheckedValue="0"
              checked-children="开"
              un-checked-children="关"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-footer">
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../../common/utils/request";
import { TextTip } from "bl-common-vue3";

const useForm = Form.useForm;

export default defineComponent({
  name: "DivideRoom",
  components: { TextTip },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parentRoom: {
      type: Object,
      default: () => ({}),
    },
    maxRoomNumber: {
      type: [Number, String],
      default: "",
    },
  },
  setup(props, { emit }) {
    const state = reactive({});

    /** 表单 */
    const modelRef = reactive({
      room_name: "",
      room_number: "",
      rental_area: "",
      charging_area: "",
      build_area: "",
      inside_area: "",
      split_parent_area: 1,
    });
    const required = [{ required: true, message: `必填项` }];
    const rulesRef = reactive({
      room_name: required,
      room_number: required,
      rental_area: required,
      build_area: required,
    });

    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    /** 提交 */
    const onSubmit = () => {
      validate().then(() => {
        const params = {
          ...props.parentRoom,
          ...modelRef,
          parent_room_id: props.parentRoom.id,
          needMsg: true,
        };
        delete params.id;
        request.post("/village", "/project/room", params).then((res) => {
          message.success(res.msg || "操作成功！");
          emit("success");
        });
      });
    };

    /** 初始化 */
    const init = () => {
      resetFields();

      const { maxRoomNumber, parentRoom } = props;
      if (maxRoomNumber) {
        modelRef.room_number = Number(maxRoomNumber) + 1;
      }
      /**
        modelRef.rental_area = parentRoom.rental_area;
        modelRef.charging_area = parentRoom.charging_area;
        modelRef.build_area = parentRoom.build_area;
        modelRef.inside_area = parentRoom.inside_area;
       */
    };

    watch(
      () => props.visible,
      (val) => {
        val && init();
      }
    );

    /** 关闭弹窗 */
    const onClose = () => {
      emit("close");
    };

    return {
      modelRef,
      validateInfos,
      ...toRefs(state),
      onClose,
      onSubmit,
    };
  },
});
</script>
